<template>
<!--督办详情  -->
  <common-title title-name="基础信息"/>
  <el-card shadow="never">
    <div class="d-flex">
        <div class="item">
            <span class="labelName">来源:</span>
            <span class="contentName m-l5">{{getSuperviseType(info.superviseType)}}</span>
        </div>
        <div class="item">
            <span class="labelName">计划完成时间:</span>
            <span class="contentName m-l5">{{info.planEndTime}}</span>
        </div>
    </div>
      <div class="d-flex row m-t20">
          <div class="item">
              <span class="labelName">执行人/联系方式:</span>
              <span class="contentName m-l5">{{info.executeUserName}}/{{info.executeUserPhone}}</span>
          </div>
          <div class="item">
              <span class="labelName">督办人:</span>
              <span class="contentName m-l5">{{info.superviseUserName}}</span>
          </div>
      </div>
      <div class="d-flex row m-t20">
          <div class="item">
              <span class="labelName">事项说明:</span>
              <span class="contentName m-l5">{{info.superviseContent}}</span>
          </div>
      </div>
  </el-card>
  <common-title title-name="当前进度" class="m-t20"/>
  <el-card  shadow="never">
      <div class="d-flex a-center j-sb status-wrap">
          <div class="d-flex a-center j-center">
              <div class="m-l5 status">{{getStatus(info.status)}}</div>
          </div>
          <el-button v-if="getURLhandler(route.path).isLook==='0'" size="small" @click="onUpdateRate">更新进度</el-button>
      </div>
      <el-divider/>
      <div class="steps-wrap m-t20 m-b10" :style="{minHeight: superviseRecordList.length*100+'px'}">
          <span class="steps-title">督办记录</span>
          <el-steps direction="vertical" :active="superviseRecordList.length-1" class="m-t10">
              <el-step v-for="(item,index) in superviseRecordList" :key="index">
                  <template #title>
                      <div class="title-wrap">
                          <div class="d-flex">
                              <span class="createTime m-r30">{{item.createTime}}</span>
                              <span v-if="item.oaUrl" @click="toOA(item.oaUrl)" class="oaUrl">查看</span>
                          </div>
                         <div>
                             <span class="createName">{{item.createName}}</span>
                             <span class="m-l5 type">{{getType(item.type)}}</span>
                         </div>
                      </div>
                  </template>
                  <template #description v-if="item.type===2">
                      <div class="remark-wrap m-t5">
                          <div>
                              <span class="rateTitle">进度:</span>
                              <span class="m-l5 rate">{{item.rate || 0}}%</span>
                          </div>
                          <div>
                              <span class="remarkTitle">说明:</span>
                              <span class="m-l5 remark">{{item.remark || '暂无'}}</span>
                          </div>
                      </div>
                  </template>
              </el-step>
          </el-steps>
      </div>
  </el-card>

  <update-rate
          ref="updateRateRef"
          @onSuccess="()=>{
                 getInfo();
                 getSuperviseRecord();
          }"
  />
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {superviseAndHandle} from "@/api/project";
import {onMounted, ref} from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import {ElCard,ElSteps,ElStep} from "element-plus";
import UpdateRate from "./components/updateRate.vue";
import {getURLhandler} from "@/views/constructionProjectManage/static/utools";

const router = useRouter();
const route = useRoute();
const gerSuperviseId = getURLhandler(route.path).superviseId;
const info = ref({});
const superviseRecordList = ref([]);

/**
 * 获取基础信息
 */
const getInfo = () => {
    superviseAndHandle.getInfo({superviseId:gerSuperviseId}).then(res=>{
        if(res.code==='200'){
          info.value = res.data;
        }
    })
}

/**
 * 督办记录
 */
const getSuperviseRecord = () => {
    superviseAndHandle.getSuperviseRecord({superviseId:gerSuperviseId}).then(res=>{
        if(res.code==='200'){
            superviseRecordList.value = res.data;
        }
    })
}

/**
 * 获取督办类型
 */
const getSuperviseType = (superviseType) => {
  return {'1':'领导督办','2':'项目任务','3':'周报计划'}[superviseType];
}

/**
 * 获取状态值
 */
const getStatus = (status) => {
    return {'-1':'未开始','0':'进行中','1':'已完成','2':'已督办','3':'督办驳回'}[status]
}

/**
 * 获取类型值
 * @param type
 * @return {*}
 */
const getType = (type) => {
    return {'1':'创建督办','2':'更新进度','3':'提交','4':'审批'}[type]
}

/**
 * 跳转OA
 * @param url
 */
const toOA = (url) => {
  window.open(url);
}

const updateRateRef = ref(null);

/**
 * 更新进度
 */
const onUpdateRate = () => {
    updateRateRef.value.openPopup(gerSuperviseId);
}

onMounted(()=>{
    getInfo();
    getSuperviseRecord();
});
</script>

<style lang="scss" scoped>
  .labelName{
    color: #7f7f7f;
    font-weight: 600;
  }

  .contentName{
    color:#000000;
  }

  .item{
    flex: 1;
  }

  .status-wrap{
    width: 100%;
    .status{
      padding: 10px 20px;
      border-radius: 20px;
      background-color: #cccccc;
      color: #FFFFFF;
    }
  }


  .steps-wrap{
    .steps-title{
      font-weight: 600;
    }
    .title-wrap{
      color: #000000;

      .oaUrl{
        cursor: pointer;
        color: #ff8150;
        text-decoration:underline;
      }
    }
    .remark-wrap{
      color: #000000;
      width: 20%;
      background: #f2f2f2;
      border-radius: 5px;
      padding: 10px;
    }
  }
</style>
